<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱的告白 | 情人节快乐</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        love: {
                            50: '#ffe6ea',
                            100: '#ffccd5',
                            200: '#ff99b3',
                            300: '#ff6691',
                            400: '#ff336f',
                            500: '#ff004d',
                            600: '#cc003f',
                            700: '#990030',
                            800: '#660022',
                            900: '#330013',
                        }
                    },
                    fontFamily: {
                        love: ['Dancing Script', 'cursive', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .heart-beat {
                animation: heartbeat 1.5s ease-in-out infinite;
            }
            .float {
                animation: float 6s ease-in-out infinite;
            }
            .float-delay-1 {
                animation: float 6s ease-in-out 1s infinite;
            }
            .float-delay-2 {
                animation: float 6s ease-in-out 2s infinite;
            }
        }
        
        @keyframes heartbeat {
            0% { transform: scale(1); }
            14% { transform: scale(1.1); }
            28% { transform: scale(1); }
            42% { transform: scale(1.1); }
            70% { transform: scale(1); }
        }
        
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
    </style>
    
    <!-- 引入手写风格字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
</head>

<body class="bg-gradient-to-br from-love-50 to-love-100 min-h-screen overflow-x-hidden">
    <!-- 背景装饰爱心 -->
    <div class="fixed inset-0 pointer-events-none overflow-hidden z-0">
        <div class="absolute top-1/4 left-10 text-love-300 opacity-20 text-4xl float">❤️</div>
        <div class="absolute top-1/3 right-20 text-love-400 opacity-20 text-3xl float-delay-1">💖</div>
        <div class="absolute bottom-1/4 left-1/3 text-love-500 opacity-20 text-5xl float-delay-2">💘</div>
        <div class="absolute bottom-1/3 right-1/4 text-love-600 opacity-20 text-4xl float">💝</div>
    </div>

    <!-- 页面内容 -->
    <div class="relative z-10 container mx-auto px-4 py-12">
        <!-- 头部标题 -->
        <header class="text-center mb-16">
            <h1 class="font-love text-[clamp(2.5rem,6vw,4.5rem)] text-love-700 mb-4 heart-beat">
                亲爱的，情人节快乐
            </h1>
            <p class="text-gray-600 text-lg md:text-xl max-w-2xl mx-auto">
                每一个与你共度的日子都是珍贵的礼物，
                愿我们的爱如同星辰，永远闪耀
            </p>
            
            <!-- 倒计时/纪念日 -->
            <div class="mt-8 bg-white/70 backdrop-blur-sm p-4 rounded-lg shadow-md inline-block">
                <p class="text-gray-700">
                    <i class="fa fa-clock-o mr-2 text-love-500"></i>
                    我们已经相识 <span id="days-together" class="font-bold text-love-600">0</span> 天
                </p>
            </div>
        </header>

        <!-- 照片墙 -->
        <section class="mb-20">
            <h2 class="font-love text-[clamp(1.8rem,4vw,2.5rem)] text-love-600 text-center mb-10">
                我们的美好回忆
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 照片1 -->
                <div class="group relative overflow-hidden rounded-xl shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
                    <img src="https://picsum.photos/id/1062/600/400" alt="浪漫约会照片" class="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <p class="text-white p-4 font-love text-xl">第一次约会</p>
                    </div>
                </div>
                
                <!-- 照片2 -->
                <div class="group relative overflow-hidden rounded-xl shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
                    <img src="https://picsum.photos/id/1082/600/400" alt="旅行照片" class="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <p class="text-white p-4 font-love text-xl">一起旅行的日子</p>
                    </div>
                </div>
                
                <!-- 照片3 -->
                <div class="group relative overflow-hidden rounded-xl shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
                    <img src="https://picsum.photos/id/177/600/400" alt="庆祝时刻照片" class="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <p class="text-white p-4 font-love text-xl">难忘的瞬间</p>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-8">
                <button id="add-memory" class="bg-love-500 hover:bg-love-600 text-white py-2 px-6 rounded-full transition-all duration-300 shadow-md hover:shadow-lg">
                    <i class="fa fa-plus mr-2"></i>添加更多回忆
                </button>
            </div>
        </section>

        <!-- 情书部分 -->
        <section class="mb-20 max-w-3xl mx-auto">
            <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-6 md:p-10 border border-love-200 relative overflow-hidden">
                <!-- 装饰元素 -->
                <div class="absolute -top-6 -right-6 text-love-200 text-4xl">💌</div>
                
                <h2 class="font-love text-[clamp(1.8rem,4vw,2.5rem)] text-love-600 text-center mb-6">
                    给你的情书
                </h2>
                
                <div class="font-love text-[clamp(1.2rem,3vw,1.5rem)] text-gray-700 leading-relaxed mb-6">
                    <p class="mb-4">亲爱的，</p>
                    <p class="mb-4">当我提笔写下这些文字时，脑海中浮现的全是你的笑容。</p>
                    <p class="mb-4">与你相遇是我生命中最美好的意外，</p>
                    <p class="mb-4">每一个和你共度的日夜都让我心存感激。</p>
                    <p class="mb-4">你让我成为了更好的自己，</p>
                    <p class="mb-4">在未来的日子里，我希望能与你一起创造更多美好的回忆。</p>
                    <p class="mt-8 text-right">永远爱你的，</p>
                    <p class="text-right font-bold">你的爱人</p>
                </div>
                
                <div class="text-center">
                    <button id="read-more" class="text-love-600 hover:text-love-700 transition-colors duration-300">
                        <i class="fa fa-heart mr-1"></i> 点击查看更多悄悄话 <i class="fa fa-heart ml-1"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 情话集 -->
        <section class="mb-20">
            <h2 class="font-love text-[clamp(1.8rem,4vw,2.5rem)] text-love-600 text-center mb-10">
                爱的箴言
            </h2>
            
            <div class="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-white/70 backdrop-blur-sm p-5 rounded-xl shadow-md border border-love-200 hover:shadow-lg transition-shadow">
                    <p class="text-gray-700 italic">"爱是理解，是包容，是无论顺境逆境都携手同行。"</p>
                </div>
                <div class="bg-white/70 backdrop-blur-sm p-5 rounded-xl shadow-md border border-love-200 hover:shadow-lg transition-shadow">
                    <p class="text-gray-700 italic">"你在时，你是一切；你不在时，一切是你。"</p>
                </div>
                <div class="bg-white/70 backdrop-blur-sm p-5 rounded-xl shadow-md border border-love-200 hover:shadow-lg transition-shadow">
                    <p class="text-gray-700 italic">"最好的爱情，是我们一起成长，成为更好的人。"</p>
                </div>
                <div class="bg-white/70 backdrop-blur-sm p-5 rounded-xl shadow-md border border-love-200 hover:shadow-lg transition-shadow">
                    <p class="text-gray-700 italic">"我想要的不多，只是和你在一起的每一个平凡日子。"</p>
                </div>
            </div>
        </section>

        <!-- 互动部分 -->
        <section class="mb-16">
            <h2 class="font-love text-[clamp(1.8rem,4vw,2.5rem)] text-love-600 text-center mb-10">
                给我的回应
            </h2>
            
            <div class="max-w-md mx-auto bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-6 md:p-8 border border-love-200">
                <form id="love-form" class="space-y-4">
                    <div>
                        <label for="message" class="block text-gray-700 mb-2">你的悄悄话：</label>
                        <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-love-300 focus:outline-none focus:ring-2 focus:ring-love-400 focus:border-transparent resize-none" placeholder="告诉我你的想法..."></textarea>
                    </div>
                    
                    <div class="grid grid-cols-3 gap-2">
                        <button type="button" class="reaction-btn py-3 rounded-lg bg-love-100 hover:bg-love-200 transition-colors" data-emoji="❤️">❤️</button>
                        <button type="button" class="reaction-btn py-3 rounded-lg bg-love-100 hover:bg-love-200 transition-colors" data-emoji="😍">😍</button>
                        <button type="button" class="reaction-btn py-3 rounded-lg bg-love-100 hover:bg-love-200 transition-colors" data-emoji="🥰">🥰</button>
                    </div>
                    
                    <button type="submit" class="w-full bg-love-600 hover:bg-love-700 text-white py-3 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg">
                        发送给我 <i class="fa fa-paper-plane ml-2"></i>
                    </button>
                </form>
                
                <div id="response-message" class="mt-6 text-center hidden">
                    <p class="text-love-700 font-love text-xl">谢谢你的回应，我会永远珍藏！</p>
                </div>
            </div>
        </section>

        <!-- 页脚 -->
        <footer class="text-center text-gray-500 text-sm py-6">
            <p>用❤️制作 | 情人节快乐</p>
            <p class="mt-2">
                <a href="#" class="hover:text-love-500 transition-colors mx-2"><i class="fa fa-music"></i> 播放浪漫音乐</a>
                <a href="#" class="hover:text-love-500 transition-colors mx-2"><i class="fa fa-download"></i> 保存为PDF</a>
            </p>
        </footer>
    </div>

    <!-- 爱心点击效果脚本 -->
    <script>
        // 计算相识天数
        function calculateDaysTogether() {
            // 替换为你们相识的日期
            const firstMetDate = new Date('2022-02-14');
            const today = new Date();
            const timeDiff = today - firstMetDate;
            const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
            
            document.getElementById('days-together').textContent = daysDiff;
        }
        
        // 点击添加爱心效果
        document.addEventListener('click', function(e) {
            const heart = document.createElement('div');
            heart.textContent = '❤️';
            heart.style.position = 'absolute';
            heart.style.left = `${e.clientX}px`;
            heart.style.top = `${e.clientY}px`;
            heart.style.pointerEvents = 'none';
            heart.style.zIndex = '100';
            heart.style.animation = 'float 3s ease-out forwards';
            heart.style.opacity = '0';
            heart.style.fontSize = '24px';
            
            document.body.appendChild(heart);
            
            // 移除元素
            setTimeout(() => {
                heart.remove();
            }, 3000);
        });
        
        // 表单提交处理
        document.getElementById('love-form').addEventListener('submit', function(e) {
            e.preventDefault();
            this.classList.add('opacity-50');
            document.getElementById('response-message').classList.remove('hidden');
            
            // 播放爱心雨效果
            createHeartRain();
        });
        
        // 反应按钮处理
        document.querySelectorAll('.reaction-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const emoji = this.getAttribute('data-emoji');
                this.classList.add('scale-110', 'bg-love-300');
                setTimeout(() => {
                    this.classList.remove('scale-110', 'bg-love-300');
                }, 300);
                
                // 显示选择的反应
                const response = document.createElement('div');
                response.textContent = emoji;
                response.className = 'fixed top-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-2 rounded-full shadow-md z-50';
                document.body.appendChild(response);
                
                setTimeout(() => {
                    response.remove();
                }, 2000);
            });
        });
        
        // 更多情话按钮
        document.getElementById('read-more').addEventListener('click', function() {
            alert('其实，千言万语都无法表达我对你的爱。你是我生命中最美的风景，是我前进的动力，是我想要共度一生的人。情人节快乐，我的爱！');
        });
        
        // 添加更多回忆按钮
        document.getElementById('add-memory').addEventListener('click', function() {
            alert('在这里可以添加更多你们的照片和回忆哦！');
        });
        
        // 创建爱心雨效果
        function createHeartRain() {
            const container = document.createElement('div');
            container.style.position = 'fixed';
            container.style.inset = '0';
            container.style.pointerEvents = 'none';
            container.style.zIndex = '100';
            document.body.appendChild(container);
            
            for (let i = 0; i < 50; i++) {
                const heart = document.createElement('div');
                heart.textContent = ['❤️', '💖', '💘', '💝', '💓'][Math.floor(Math.random() * 5)];
                heart.style.position = 'absolute';
                heart.style.left = `${Math.random() * 100}vw`;
                heart.style.top = `-${Math.random() * 20 + 10}px`;
                heart.style.fontSize = `${Math.random() * 20 + 10}px`;
                heart.style.animation = `fall ${Math.random() * 3 + 2}s linear forwards`;
                heart.style.opacity = Math.random() * 0.8 + 0.2;
                heart.style.transform = `rotate(${Math.random() * 360}deg)`;
                
                container.appendChild(heart);
            }
            
            // 添加下落动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fall {
                    to {
                        transform: translateY(100vh) rotate(${Math.random() * 360}deg);
                    }
                }
            `;
            container.appendChild(style);
            
            // 移除容器
            setTimeout(() => {
                container.remove();
            }, 5000);
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            calculateDaysTogether();
            
            // 页面加载时的欢迎效果
            setTimeout(() => {
                const welcome = document.createElement('div');
                welcome.className = 'fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 backdrop-blur-sm px-8 py-6 rounded-xl shadow-2xl z-50 text-center';
                welcome.innerHTML = `
                    <h3 class="font-love text-2xl text-love-600 mb-2">欢迎来到我们的情人节页面</h3>
                    <p class="text-gray-700 mb-4">希望你会喜欢这份小惊喜</p>
                    <button id="start-btn" class="bg-love-500 hover:bg-love-600 text-white py-2 px-6 rounded-full transition-all">
                        开始探索 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                `;
                document.body.appendChild(welcome);
                
                document.getElementById('start-btn').addEventListener('click', function() {
                    welcome.remove();
                });
            }, 500);
        });
    </script>
</body>
</html>
